<template>
  <view :style="[styles]">
    <text
      :style="{
        fontSize: attribute.size,
        color: attribute.color,
      }"
      :class="[attribute.lines && `u-line-${attribute.lines}`]"
      :lines="attribute.lines"
      @click="handleNavigate"
      >{{ attribute.text }}</text
    >
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";
import { callNavigateHook } from "../../../libs/navigateTo";

export default {
  name: `${COMPREIFX}text`,
  props: {
    attribute: Object,
    styles: Object,
  },
  data() {
    return {
      customerStyle: {
        display: "-webkit-box !important",
        overflow: "hidden",
        textOverflow: "ellipsis",
        wordBreak: "break-all",
      },
    };
  },
  methods: {
    handleNavigate() {
      if (this.attribute.navigateType) {
        callNavigateHook({
          type: this.attribute.navigateType,
          target: this.attribute,
        });
      } else {
        this.$emit("event", {
          eventName: "click",
          attribute: this.attribute,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.u-line {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  //-webkit-line-clamp: 2;
  -webkit-box-orient: vertical !important;
}
// 超出行数，自动显示行尾省略号，最多5行
// 来自uView的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
@for $i from 1 through 100 {
  .u-line-#{$i} {
    /* #ifdef APP-NVUE */
    // nvue下，可以直接使用lines属性，这是weex特有样式
    lines: $i;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;
    /* #endif */

    /* #ifndef APP-NVUE */
    // vue下，单行和多行显示省略号需要单独处理
    @if $i == '1' {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    } @else {
      display: -webkit-box!important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: $i;
      -webkit-box-orient: vertical!important;
    }
    /* #endif */
  }
}

</style>
